<script setup lang='ts'>
import { ProTableOption } from '../components/ProTable/type';
import { ProTableRequest } from '../components/types';

const options: ProTableOption[] = [
    {
        key: 'id',
        title: '编号'
    },
    {
        key: 'sex',
        title: '',
        type: 'radio',
        radioAttrs: {
            button: true,
            name: 'sex',
            list: [],
            modelValue: '1',
            variant: "primary-filled"
        },
        span: 12,
        request: async () => {
            return await [
                { label: '已完成订单', value: '0' },
                { label: '未完成订单', value: '1' },
                { label: '待发货订单', value: '2' },
            ]
        },
        // isFormSlot: true
    },
    {
        key: 'name',
        title: '姓名',
        sorter: true
    },
    {
        key: 'age',
        title: '年龄',
        sorter: true
    }

]

const request = async (data: ProTableRequest) => {
    console.log('data.sort', data.sort);
    return await ({
        list: [{ name: 'admin', id: 1, age: 18 }, { name: '张三', id: 2, age: 15 }, { name: '张三', id: 3, age: 14 }, { name: '张三', id: 4, age: 17 }],
        total: 2
    })
}

</script>

<template>
    <ProTable :options="options" :request="request">
        <template #form-sex>
            <t-col :span="12" class="mb-[20px]">
                <t-button>自定义头部</t-button>
            </t-col>
        </template>
    </ProTable>
</template>

<style scoped></style>
